import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import styles from './index.module.scss'

const generateWeekDays = () => {
    const today = new Date()
    const currentDay = today.getDay()
    const startOfWeek = new Date(today)
    startOfWeek.setDate(today.getDate() - currentDay)
    const weekDays = [...Array(7)].map((_, i) => {
        const day = new Date(startOfWeek)
        day.setDate(startOfWeek.getDate() + i)

        return day
    })
    return weekDays
}
const WeekDays = () => {
    const handleClick = () => {
        Taro.navigateTo({ url: '/subPages/todayRecord/index' })
    }
    const weekDays = generateWeekDays()
    const today = new Date().toLocaleDateString()
    return (
        <View className={styles.container}>
            {weekDays.map((day) => (
                <View
                    onClick={() => handleClick()}
                    className={
                        today == day.toLocaleDateString()
                            ? styles.today
                            : styles.day
                    }
                    key={day.toLocaleDateString()}
                >
                    <View className={styles.dayName}>
                        {
                            day.toLocaleDateString('en-US', {
                                weekday: 'short',
                            })[0]
                        }
                    </View>
                    <View className={styles.dayNum}>{day.getDate()}</View>
                </View>
            ))}
        </View>
    )
}
export default WeekDays
